{include file="public/head" title="订单" keywords="订单" description="订单" /}
<style>
    .mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before{
        color: #01cebf;
    }
    .area li{
        float: left;
        margin-right: 5px;
        border: 1px solid #01cebf;
        text-align: center;height: 20px;
        line-height: 20px;
        padding-left: 5px;
        padding-right: 5px;
    }
    .area:nth-child(1){
        margin-left: 10px;
    }
</style>
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
    <!-- 菜单容器 -->

    <div class="mui-inner-wrap">
        <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper" style="background-color: #fff;">
            <div class="mui-scroll">
                <header class="tx_head">
                    <p>
                        <a href="{:url('index')}" class="header_p1"><span class="mui-icon mui-icon-arrowleft"></span></a>
                    <h5>服务区域</h5>

                    </p>
                </header>
                <main class="wdzh_main">
                    <section class="wdzh_main_section1">
                        <div style="background: #ccc;   height: 3rem;line-height: 2rem; width: 85%; border: 1px solid #ccc;  margin: 0.5rem 1rem;">服务区域可以选择多个<span style="float: right">{$step}</span></div>
                    </section>
                    <section class="wdzh_main_section1 " style="margin-bottom: 5px;margin-top: -15px;">
                        <div class="area">
                            <label style="display: block;">
                                <a href="javascript:ishow();">查看现在服务的区域</a>
                            </label>
                            {foreach $area_name as $v}
                            <li style="display: none" class="area_name" data-align="0"> {$v.name}</li>
                            {/foreach}
                        </div>

                    </section>
                    <section class="wyty_section2 line">
                        <form class="mui-input-group jionme">

                        </form>
                    </section>


                </main>
                <br>
                <br>
                <br>
            </div>
        </div>
        <div class="mui-off-canvas-backdrop"></div>
    </div>
</div>
<nav style="border-top:#fff;background-color:#fff">

    <span id="btn" style=" display: block;font-size: 1.2rem; float: left;background: #797978;color: #fff;width: 90%;margin-left: 5%;border-radius: 5px;height: 2.5rem; line-height: 2.5rem;text-align: center">
                <a href="javascript:todoarea();" style="color: #fff">确定</a>
            </span>
</nav>
{include file="public/footer"}
</body>
<script>
    var selecds = '';
     selecds = {$userarea}?{$userarea}:'';
    var arr =  selecds.split(',');console.log(arr)
    var arrayid= new Array();
    if (arr.length >0){
        for (i=0; i<arr.length; i++){
            arrayid.push(arr[i])
        }
    }
    console.log(arrayid)
    mui('body').on('tap','li',function(){
        var f = $(this).attr('data-title');
        var pid = $(this).attr('data-id');
        var level = $(this).attr('data-index');
        if (f == 'area'){
            area(pid,level)
        }
    });
    function area(pid,level) {
        $.ajax({
            url:"{:url('area')}",
            data:{pid:pid,level:level},
            dataType:"json",
            success:function (res) {
                var li =$(".jionme").find('li');
                li.remove();
                $('.jionme').append(res.data);
            }
        });
    }
    $(function () {
        $.ajax({
            url:"{:url('area')}",
            data:{pid:0},
            dataType:"json",
            success:function (res) {
                $('.jionme').append(res.data);

            }
        });

    });
    mui('.mui-input-group').on('change', 'input', function() {
        var istrue = this.checked;
        var value = $(this).val();
        if (istrue){
            arrayid.push(value);
        }else {
            var index = arrayid.indexOf(value);
           arrayid.splice(index,1);
        }
        if (arrayid.length>0){
            $("#btn").css('background','#00bfb0');
            $("#btn").css('color','#fff');
        }else {
            $("#btn").css('background','#797978');
        }
    });
    mui('body').on('tap','a',function(){
        var str = this;
        // 强制转换为字符串
        str = String(str);
    });
    function todoarea() {
        if (arrayid.length < 0){
          return false;
        }
        $.ajax({
            type:'post',
            url:"{:url('areaId')}",
            data:{areaid:arrayid},
            dataType:"json",
            success:function (res) {
               if (res.code == 1){
                   layer.msg(res.msg,{icon:1,time:1000},function () {
                       window.location.href = "{:url('index')}";
                   })
               }else {
                   layer.msg(res.msg,{icon:1,time:1000})
               }

            }
        });
    }
    function getCheckBoxRes(jionme){
        var rdsObj   = document.getElementsByClassName(jionme);
        var checkVal = new Array();
        var k        = 0;
        for(i = 0; i < rdsObj[0].length; i++){
            if(rdsObj[0][i].checked){
                checkVal[k] = rdsObj[0][i].value;
                k++;
            }
        }
        return checkVal;
    }
    function ishow() {
        var display = $('.area_name').attr('data-align');
        if (display == 0){
            $('.area_name').css('display','block');
            $('.area_name').attr('data-align',1);
        }else {
            $('.area_name').css('display','none');
            $('.area_name').attr('data-align',0);
        }

    }
</script>
</html>